<template>
  <a-modal title="选择图标" :footer="null" :width="1000" @cancel="cancel">
    <a-typography-title v-if="iconfontShow" :level="5" class="pb-2">
      Iconfont 图标
    </a-typography-title>
    <template v-if="iconfontShow">
      <IconFont
        class="icon"
        v-for="key in Icons"
        :key="key"
        :type="key"
        :title="key"
        @click="selectIcon(key)"
      />
    </template>
    <a-typography-title v-if="anticonShow" :level="5" class="pb-2 pt-2">
      Antd 图标
    </a-typography-title>
    <template v-if="anticonShow">
      <template v-for="key in AntIcons" :key="key">
        <component
          v-bind:is="key"
          :title="key"
          @click="selectIcon(key)"
        ></component>
      </template>
    </template>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { Icons, AntIcons } from '@/utils/icons'

export default defineComponent({
  name: 'SelectIcon',
  props: {
    iconfontShow: {
      type: Boolean,
      default: true
    },
    anticonShow: {
      type: Boolean,
      default: false
    }
  },
  emits: ['selectIcon', 'update:visible'],
  setup(props, ctx) {
    function selectIcon(key: string) {
      ctx.emit('update:visible', false)
      ctx.emit('selectIcon', key)
    }
    function cancel() {
      ctx.emit('update:visible', false)
    }
    return {
      Icons,
      AntIcons,
      cancel,
      selectIcon
    }
  }
})
</script>

<style lang="less" scoped>
.icon,
.anticon {
  display: inline-block !important;
  font-size: 24px !important;
  margin: 6px 12px 10px !important;
}
</style>
